<template>
    <div>
        <h1>优惠券列表</h1>
        优惠券类型:<select v-model="info.DisType">
                        <option value="">请选择</option>
                        <option :value="1">代金券</option>
                        <option :value="2">折扣券</option>
                        <option :value="3">兑换券</option>
                    </select>
        标题:<input type="text" v-model="info.tital">
        <input type="button" value="查询" @click="GetDis">
        <input type="button" value="批量删除" class="btn btn-primary" @click="DelAlldis">
        <table class="table table-bordered">
            <tbody> 
                <tr class="bg-primary">
                    <td>
                        <input type="checkbox" v-model="checked" @click="checkall">
                    </td>
                    <td>编号</td>
                    <td>优惠券类型</td>
                    <td>优惠券标题</td>
                    <td>优惠券副标题</td>
                    <td>图片</td>
                    <td>库存</td>
                    <td>使用条件</td>
                    <td>减免/折扣</td>
                    <td>有效时间</td>
                    <td>结束时间</td>
                    <td>适用业务</td>
                    <td>使用须知</td>
                    <td>使用门店</td>
                    <td>服务电话</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in data.list":key="item.Id">
                    <td>
                        <input type="checkbox" v-model="ids" :value="item.Id" @change="checkone">
                    </td>
                    <td>{{item.Id}}</td>
                    <td v-if="item.DisType==1">代金券</td>
                    <td v-if="item.DisType==2">折扣券</td>
                    <td v-if="item.DisType==3">兑换券</td>
                    <td>{{item.Tital}}</td>
                    <td>{{item.Ftital}}</td>
                    <td><img :src="item.Photo" width="50" height="50" ></td>
                    <td>{{item.Numberd}}</td>
                    <td>消费{{item.PayMoney}}</td>
                    <td v-if="item.DisType==1">减免{{item.SbuMoney}}元</td>
                    <td v-if="item.DisType==2">打{{item.ZheKou}}折</td>
                    <td v-if="item.DisType==3">兑换商品</td>
                    <td>{{moment(item.BaginTime).format("YYYY-MM-DD")}}</td>
                    <td>{{moment(item.EndTime).format("YYYY-MM-DD")}}</td>
                    <td>{{item.service}}</td>
                    <td>{{item.Notice}}</td>
                    <td>{{item.ShopName}}</td>
                    <td>{{item.Phone}}</td>
                    <td>
                        <input type="button" value="删除" class="btn btn-danger" @click="del(item.Id)">
                        <input type="button" value="编辑" class="btn btn-success" @click="Update(item.Id)">
                    </td>
                </tr>
            </tbody>
        </table>
        <span>共<b style="color: red;">{{data.totalPage}}</b>条</span>
        <span>每页<b style="color: red;">{{info.pagesize}}</b>条</span>
        <span>共<b style="color: red;">{{info.pageindex}}/{{data.totalPage}}</b>页</span>
        
        <input type="button" value="首页" @click="Fenpage(1)">
        <input type="button" value="上一页" @click="Fenpage(info.pageindex-1)">
        <span v-for="item in data.totalPage" @click="Fenpage(item)">{{item}}</span>
        <input type="button" value="下一页" @click="Fenpage(info.pageindex+1)">
        <input type="button" value="尾页" @click="Fenpage(data.totalPage)">

        <input type="number" v-model="info.pageindex">
        <input type="button" value="跳转" @click="Fenpage(info.pageindex)">

        <select v-model="info.pagesize" @click="GetDis">
            <option v-for="item in arr" :value="item">每页{{item}}条</option>
        </select>
    </div>
</template>

<script setup lang="ts">
//响应式数据
import {ref,reactive,onMounted} from 'vue';
import axios from 'axios';
import moment from 'moment';
//跳转
import {useRouter,useRoute} from 'vue-router';
const router=useRouter();
const route=useRoute();


let info:any=reactive({
    pageindex:1,
    pagesize:2,
    DisType:'',
    Tital:'',
})

let data:any=reactive({
    totalCount:0,
    totalPage:0,
    list:[],
})

onMounted(()=>{
    GetDis();
})
//-----------------分页---------------
const Fenpage=(num:any)=>{
    if(num>=1 && num<=data.totalPage){
        info.pageindex=num;
        GetDis();
    }
    else{
        alert('超出页码范围');
        return;
    }
}
let arr:any=ref([2,3,4,5,6]);
//-----------------------列表显示---------------
const GetDis=()=>{
    axios({
        url:'https://localhost:7193/api/DisCount/GetDiscount',
        method:'get',
        params:info,
    })
    .then(res=>{
        console.log(res);
        Object.assign(data,res.data);
    })
}
//-------------------删除---------------------
const del=(id:any)=>{
    if(confirm('确认删除吗?')){
        axios({
            url:'https://localhost:7193/api/DisCount/DeleteDis',
            method:'delete',
            params:{
                id:id
            }
        })
        .then(res=>{
            console.log(res);
            if(res.data>0){
                alert('删除成功');
                GetDis();
            }
            else{
                alert('删除失败');
            }
        })
    }
}
//----------------------全选复选---------------------------
//全选
let checked:any=ref(false);
//复选
let ids:any=ref([]);

//全选
const checkall=()=>{
    checked.value=!checked.value;
    if(checked.value==true){
        ids.value=data.list.map((item:any)=>{
            return item.Id;
        });
    }
    else{
        ids.value=[];
    }
}
//反选
const checkone=()=>{
    if(ids.value.length==data.list.length){
        checked.value=true;
    }
    else{
        checked.value=false;
    }
}
//-------------------------批删-----------------
const DelAlldis=()=>{
    if(confirm('确认删除吗?')){
        axios({
            url:'https://localhost:7193/api/DisCount/DelAllDis',
            method:'delete',
            params:{
                ids:ids.value.toString(),
            }
        })
        .then(res=>{
            console.log(res);
            if(res.data>0){
                alert('删除成功');
                GetDis();
            }
            else{
                alert('删除失败');
            }
        })
    }
}
//-----------------------反填--------------------------
const Update=(id:any)=>{
    router.push({
        path:'/disupdate',
        query:{
            id:id
        }
    })
}
//-----------------------
</script>

<style scoped>
span{
    margin: 0 5px;
}
input{
    margin: 0 5px;
}
</style>